<template>
  <div class="main">
    <div class="header">
      <div class="title">
        <div class="titleDiv">湖北咿呀口腔医院</div>
      </div>
      <div class="headerItem">
        <div class="items">
          <div class="borders">姓名:{{ data.name }}</div>
          <div class="borders">
            性别:{{ data.sex == 0 ? '未知' : data.sex == 1 ? '男' : '女' }}
          </div>
          <div>病历编号:{{ data.caseNumber }}</div>
        </div>
        <div class="items">
          <div class="borders">手机:{{ data.phoneNumber }}</div>
          <div class="borders">
            地址:{{ data.province }}{{ data.city }}{{ data.district }}
          </div>
          <div>微信号:{{ data.wechatNumber }}</div>
        </div>
        <div class="items">
          <div class="borders">职业:{{ data.profession }}</div>
          <div class="borders">电话:{{ data.phoneNumber2 }}</div>
          <div>Email:{{ data.email }}</div>
        </div>
        <div class="items" style="borderbottom: none">
          <div class="borders">出生:</div>
          <div class="borders">国籍:</div>
          <div>工作单位:</div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="bodyTitle">病史</div>
      <div class="bodyItems">
        <div class="itemBox">
          <div class="left">就诊原因</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 20%" label="检查"></el-checkbox>
              <el-checkbox style="width: 20%" label="拍片"></el-checkbox>
              <el-checkbox style="width: 20%" label="牙龈出血"></el-checkbox>
              <el-checkbox style="width: 20%" label="祛疤色素"></el-checkbox>
              <el-checkbox style="width: 20%" label="美白"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="补牙"></el-checkbox>
              <el-checkbox style="width: 20%" label="牙疼"></el-checkbox>
              <el-checkbox style="width: 20%" label="拔牙"></el-checkbox>
              <el-checkbox style="width: 20%" label="折裂/外伤"></el-checkbox>
              <el-checkbox
                class="hide"
                style="width: 20%"
                label="折裂/外伤"
              ></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="牙齿松动"></el-checkbox>
              <el-checkbox style="width: 20%" label="肿胀"></el-checkbox>
              <el-checkbox style="width: 20%" label="智齿发炎"></el-checkbox>
              <el-checkbox style="width: 20%" label="牙齿缺失"></el-checkbox>
              <el-checkbox style="width: 20%" label="想做种植"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="美容修复"></el-checkbox>
              <el-checkbox style="width: 20%" label="牙周病"></el-checkbox>
              <el-checkbox style="width: 20%" label="矫正调整"></el-checkbox>
              <el-checkbox
                style="width: 20%"
                label="牙齿排列不齐"
              ></el-checkbox>
              <el-checkbox
                class="hide"
                style="width: 12%"
                label="折裂/外伤"
              ></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">现在身体状况</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 16%" label="良好"></el-checkbox>
              <el-checkbox style="width: 20%" label="不佳"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 16%" :label="msg"></el-checkbox>
              <el-checkbox style="width: 20%" label="怀疑有孕"></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">既往史</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 20%" label="血液病"></el-checkbox>
              <el-checkbox style="width: 20%" label="甲亢"></el-checkbox>
              <el-checkbox style="width: 20%" label="艾滋病"></el-checkbox>
              <el-checkbox
                style="width: 20%"
                label="安装心脏起搏器"
              ></el-checkbox>
              <el-checkbox
                class="hide"
                style="width: 14%"
                label="外伤"
              ></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 16%" label="正畸矫正史"></el-checkbox>
              <el-checkbox style="width: 16%" :label="msg1"></el-checkbox>
              <el-checkbox
                style="width: 20%"
                label="出血性疾病/肾病"
              ></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">过敏史</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 16%" label="青霉素"></el-checkbox>
              <el-checkbox style="width: 16%" label="磺胺类"></el-checkbox>
              <el-checkbox style="width: 16%" label="其他"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 16%" label="海鲜"></el-checkbox>
              <el-checkbox style="width: 16%" label="鸡蛋"></el-checkbox>
              <el-checkbox style="width: 16%" label="芒果"></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">是否注射过局部麻醉</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 16%" label="是:感觉不适"></el-checkbox>
              <el-checkbox style="width: 16%" label="没有不适"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 16%" label="否"></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">对治疗的要求</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 16%" label="任何时候"></el-checkbox>
              <el-checkbox
                style="width: 16%"
                label="次数少时间长"
              ></el-checkbox>
              <el-checkbox
                style="width: 16%"
                label="次数多时间短"
              ></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 16%" label="经济型"></el-checkbox>
              <el-checkbox
                style="width: 16%"
                label="最好的治疗方法和材料"
              ></el-checkbox>
            </div>
          </div>
        </div>

        <div class="itemBox">
          <div class="left">选择我们的原因</div>
          <div class="right">
            <div>
              <el-checkbox style="width: 20%" label="社区义诊"></el-checkbox>
              <el-checkbox style="width: 20%" label="网络"></el-checkbox>
              <el-checkbox style="width: 20%" label="微信"></el-checkbox>
              <el-checkbox style="width: 20%" label="报纸"></el-checkbox>
              <el-checkbox style="width: 20%" label="电梯广告"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="户外棚子"></el-checkbox>
              <el-checkbox style="width: 20%" label="宣传单"></el-checkbox>
              <el-checkbox style="width: 20%" label="专家讲座"></el-checkbox>
              <el-checkbox style="width: 20%" label="代金卷"></el-checkbox>
              <el-checkbox style="width: 20%" label="小牙医"></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="美团"></el-checkbox>
              <el-checkbox style="width: 20%" label="附件的人"></el-checkbox>
              <el-checkbox style="width: 20%" label="朋友介绍"></el-checkbox>
              <el-checkbox style="width: 20%" label="路过"></el-checkbox>
              <el-checkbox
                class="hide"
                style="width: 20%"
                label="折裂/外伤"
              ></el-checkbox>
            </div>
            <div>
              <el-checkbox style="width: 20%" label="电话回访"></el-checkbox>
              <el-checkbox style="width: 20%" label="以前来过"></el-checkbox>
              <el-checkbox style="width: 20%" label="合作商家"></el-checkbox>
              <el-checkbox style="width: 20%" label="瑞尔合作"></el-checkbox>
              <el-checkbox
                class="hide"
                style="width: 20%"
                label="折裂/外伤"
              ></el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <h4>本人承诺以上填写内容均真实有效</h4>
    </div>
  </div>
</template>

<script>
/** 预约视图 打印预览 */
export default {
  name: 'MakeCase',
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      msg: '怀孕(' + '\xa0\xa0\xa0' + ') 月',
      msg1: '吸烟一天' + '\xa0\xa0\xa0' + '支',
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(this.data)
    }, 300)
  },
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  .header {
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #000;
      height: 60px;
      text-align: center;
      .titleDiv {
        letter-spacing: 2em;
        letter-spacing: 15px;
        margin-bottom: 15px;
      }
      div {
        line-height: 60px;
      }
    }
    .headerItem {
      display: flex;
      flex-direction: column;
      .items {
        height: 40px;
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #000;
        .borders {
          border-right: 1px solid #000;
        }
        div {
          line-height: 40px;
          padding-left: 12px;
          width: 33%;
        }
      }
    }
  }
  .body {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
    .bodyTitle {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #000;
    }
    .bodyItems {
      display: flex;
      flex-direction: column;
      .itemBox {
        display: flex;
        .left {
          display: flex;
          width: 20%;
          flex-shrink: 0;
          align-items: center;
          text-align: center;
          justify-content: center;
          border-bottom: 1px solid #000;
          border-right: 1px solid #000;
        }
        .right {
          width: 80%;
          div {
            width: 100%;
            display: flex;
            // justify-content: space-between;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #000;
          }
        }
      }
    }
  }
  .footer {
    text-align: center;
  }
  .hide {
    visibility: hidden;
  }
}
</style>
